<template>
  <div class="creation-manager">
    <!-- 顶部搜索与创建 -->
    <div class="top-bar" ref="topBox">
      <div class="top-left">
        <div class="title">分享管理</div>
        <div class="dz">作品管理<span>/分享管理</span></div>
      </div>
      <div class="top-right">
        <el-button
          class="cj-btn"
          type="danger"
          size="small"
          icon="el-icon-plus"
          @click="clearAllLinks"
          >清除所有分享链接</el-button
        >
      </div>
    </div>

    <div class="neiRongBox" :style="'height:' + tableHeight + 'px'">
      <el-table
        v-if="shareData.length > 0"
        :data="shareData"
        border
        style="width: 100%"
        stripe
      >
        <!-- 序号 -->
        <el-table-column prop="index" label="序号" align="center" width="70">
          <template #default="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>

        <!-- 章节 -->
        <el-table-column
          prop="chapter_title"
          label="章节"
          align="left"
        ></el-table-column>

        <!-- 浏览次数 -->
        <el-table-column
          prop="view_count"
          label="浏览次数"
          align="center"
          width="120"
        ></el-table-column>

        <!-- 链接权限 -->
        <el-table-column
          prop="permission"
          label="链接权限"
          align="center"
          width="150"
        >
          <template #default="scope">
            <el-select
              v-model="scope.row.permission"
              placeholder="请选择"
              size="small"
            >
              <el-option
                v-for="option in permissionOptions"
                :key="option.value"
                :label="option.label"
                :value="option.value"
              />
            </el-select>
          </template>
        </el-table-column>

        <!-- 操作 -->
        <el-table-column label="操作" align="center" width="180">
          <template #default="scope">
            <el-button type="primary" size="small" @click="copyLink(scope.row)">
              复制链接
            </el-button>
            <el-button
              type="danger"
              size="small"
              @click="deleteLink(scope.row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 空数据提示 -->
      <div class="empty-data" v-else>
        <img src="@/assets/images/noSj.png" alt="" />
        <div>您还没有分享链接</div>
      </div>
    </div>
    <!-- 分页 -->
    <el-pagination
      style="float: right"
      prev-text="上一页"
      next-text="下一页"
      v-if="shareData.length > 0"
      background
      layout="prev, pager, next"
      :total="pagination.total"
      @current-change="fetchshareList"
    ></el-pagination>
  </div>
</template>

<script>
import { Message } from "element-ui";
import {
  getShareList,
  deleteShareLink,
  deleteAllShareLink,
  copyShareLink,
} from "@/api/share";
export default {
  data() {
    return {
      tableHeight: "200px",
      shareData: [],
      permissionOptions: [
        { value: "view", label: "可查看" },
        // { value: "edit", label: "可编辑" },
        // { value: "comment", label: "可评论" },
      ],
      showRemoveDialog: false,
      removeID: "",

      showPx: false,
      showDialog: false,
      searchKeyword: "",
      currentTab: "all",

      shareData: [],
      pagination: {
        total: 0,
        page: 1,
        limit: 10,
      },
      createForm: {
        title: "",
        classify_id: null,
        cover_image: "",
      },
      classifyList: [],
    };
  },

  created() {
    this.fetchshareList();
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.handleResize);
  },
  mounted() {
    this.$nextTick(() => {
      this.handleResize();
    });
    window.addEventListener("resize", this.handleResize);
  },
  methods: {
    handleResize() {
      this.tableHeight =
        window.innerHeight - 120 - this.$refs.topBox.clientHeight;
    },
    handleCopyLink(data) {
      const textarea = document.createElement("textarea");
      textarea.value = location.origin + data;
      document.body.appendChild(textarea);
      textarea.select();
      document.execCommand("copy");
      document.body.removeChild(textarea);
      this.$message.success("复制成功");
    },
    copyLink(row) {
      copyShareLink({ share_id: row.share_id }).then((res) => {
        this.handleCopyLink(res);
      });
      // 实现复制链接功能
      // this.$message.success(`已复制链接: ${row.chapter}`);
    },
    deleteLink(row) {
      // 实现删除功能
      // this.shareData = this.shareData.filter((item) => item !== row);
      // this.$message.success("分享链接已删除");
      this.$confirm("确认删除？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        deleteShareLink({ share_id: row.share_id }).then((res) => {
          this.fetchshareList();
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        });
      });
    },
    clearAllLinks() {
      // 清除所有分享链接
      this.$confirm("确认删除所有分享链接？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        deleteAllShareLink().then((res) => {
          this.fetchshareList();
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        });
      });
    },

    // 获取作品列表
    fetchshareList(page = 1) {
      this.pagination.page = page;
      const id = Number(this.$route.params.id);
      getShareList({ creation_id: id, ...this.pagination }).then((res) => {
        console.log(res);
        this.shareData = res.shares;
        this.pagination.total = res.total;
      });
    },
    // 获取分类数据

    // 搜索
    handleSearch() {
      this.fetchshareList();
    },
  },
};
</script>

<style scoped>
.creation-manager {
  padding: 24px 22px;
}
.top-bar {
  display: flex;
  justify-content: space-between;
  margin-bottom: 32px;
}
.top-left .title {
  font-size: 20px;
  font-weight: bold;
  line-height: 28px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}
.top-left .dz {
  font-size: 12px;
  font-weight: 400;
  line-height: 25px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}
.search-input {
  width: 400px;
}
.tabs {
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  cursor: pointer;
}

.creation-list {
  overflow: auto;
}
.creation-list .creation-card {
  width: 185px;
  overflow: hidden;
  text-align: center;
  margin-bottom: 32px;
  margin-right: 24px;
  position: relative;
  float: left;
}
.cover-image {
  width: 185px;
  height: 247px;
  object-fit: cover;
  border-radius: 4px 4px 4px 4px;
}
.gxsj {
  font-size: 12px;
  color: #ffffff;
  line-height: 30px;
  position: absolute;
  top: 224px;
  width: 100%;
  text-align: center;
  left: 0;
  height: 30px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
}
.creation-info {
  margin-top: 8px;
}
.creation-info .name {
  line-height: 22px;
  font-weight: 400;
  font-size: 16px;
  color: #00011b;
  margin-bottom: 4px;
}
.creation-info .wz {
  font-size: 12px;
  color: rgba(0, 1, 27, 0.5);
  line-height: 14px;
}
.empty-data {
  text-align: center;
  color: rgba(0, 1, 27, 0.5);
  padding-top: 360px;
  font-size: 14px;
}
.empty-data img {
  width: 140px;
  height: 120px;
}
.create-link {
  color: #165deb;
  cursor: pointer;
}
.search-input ::v-deep .el-input__inner {
  height: 46px;
  line-height: 46px;
  font-size: 16px;
  border-radius: 8px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.search-input ::v-deep .el-button--medium {
  border-radius: 8px;
  background: #165deb;
  color: #fff;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.search-btn,
.cj-btn {
  height: 46px;
  line-height: 46px;
  font-size: 16px;
  padding: 0 25px;
  font-weight: bold;
  border-radius: 8px;
}
.cj-btn {
  margin-left: 25px;
}
::v-deep .el-tabs__nav-wrap::after {
  display: none;
}
::v-deep .el-tabs__active-bar {
  display: none;
}
::v-deep .el-tabs__item {
  font-size: 16px;
  padding: 0 16px;
  font-weight: normal;
  height: 22px;
  line-height: 22px;
}
::v-deep .el-tabs__item.is-active {
  font-weight: bold;
}
.px {
  float: right;
  font-size: 14px;
  color: #00011b;
  line-height: 20px;
}
.px i {
  margin-left: 2px;
}
.px.active {
  color: rgba(22, 93, 235, 1);
}
.pxitem {
  text-align: center;
  color: #00011b;

  font-size: 14px;
  line-height: 20px;
  margin: 20px 0;
}
.pxitem:hover {
  color: #165deb;
  cursor: pointer;
}
.moreCz {
  position: absolute;
  right: 10px;
  top: 10px;
  background: rgba(0, 1, 27, 0.6);
  color: #fff;
  height: 24px;
  width: 24px;
  padding: 0;
}
</style>
<style>
.zpBox2 {
  min-width: 50px !important;
  padding: 0;
}
.zpBox {
  min-width: 50px !important;
  padding: 0;
}
.zpBox .pxitem {
  font-size: 16px;
  color: #00011b;
}
</style>
